<template>
  <div class="header">
    <div class="header-top">
      <p class="left">处方</p>
      <p class="right">病历</p>
    </div>

    <el-form :label-position="labelPosition" :model="formLabelAlign">
      <el-form-item label="患者姓名">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="患者卡号">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="患者年龄">
        <el-input v-model="formLabelAlign.region"></el-input>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-input v-model="formLabelAlign.type"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="region">
        <el-select v-model="ruleForm.region">
          <el-option label="男" value="shanghai"></el-option>
          <el-option label="女" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="手机号码">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="接诊类型">
        <el-input v-model="formLabelAlign.region"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="" class="last">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="诊断" class="foot">
        <el-input v-model="formLabelAlign.type"></el-input>
      </el-form-item>
      <el-form-item label="医疗" class="foot">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import area from "../../../assets/area.json";
export default {
  data() {
    return {
      labelPosition: "top",
      options: area, //级联框
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        address: "",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  border-radius: 10px;
  background-color: white;
  padding-top: 20px;
}

.header-top {
  width: 100px;
  height: 25px;
  display: flex;
  margin-left: 20px;
  border: 1px solid black;
  border-radius: 5px;
  align-items: center;
}
.header-top p {
  width: 50px;
  text-align: center;
  cursor: pointer;
}

.el-form-item {
  display: inline-block;
  width: 23%;
  flex-wrap: wrap;
  margin: 0 10px 8px;
}

.last {
  width: 50%;
}

.foot {
  width: 47%;
}

.el-input__inner {
  height: 30px;
  line-height: 30px;
}

.el-form-item__label {
  line-height: 30px;
}

.left {
  border-right: solid 1px black;
}

.box {
  display: flex;
}
/* 初始化样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

html {
  font-family: "微软雅黑", "宋体", Arial;
}

img {
  vertical-align: top;
  border: 0;
}
.s1 {
  white-space: nowrap;
  /* 强制不换行 */

  overflow: hidden;
  /* 溢出省略 */

  text-overflow: ellipsis;
  /* 多余显示省略号 */
}
.s2 {
  /* 定义旧版弹性盒 */
  display: -webkit-box;
  /* 主轴方向为垂直方向 */
  -webkit-box-orient: vertical;
  /* 行数为2 */
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
input,
button {
  padding: 0;
  border: 0;
}
input,
textarea ， select ，button {
  /* 去掉点击时的外框 */
  outline: none;
  color: inherit;
  font-family: inherit;
}
textarea {
  /* 防止文本域被用户拉伸 */
  resize: none;
}
button {
  /* 按钮设为手型 */
  cursor: pointer;
}
.cl:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.cl {
  zoom: 1;
}
em,
i {
  font-style: normal;
}
/* 
html{
    font-size: calc(100vw/7.5);
}

body{
    font-size: .24rem;
} */
</style>